<template>
	<view class="usercenter">
		<auth ref="auth" />
		<view class="userdetail">
			<view class="userinfo">
				<view class="userleft" v-if="userinfo && userinfo.headimgurl">
					<image class="userimg" :src="userinfo.headimgurl" mode=""
						@click="goPage('/pagesA/my/userinfo/index')">
					</image>
					<view class="username">
						<text class="nick" @click="goPage('/pagesA/userinfo/index')">{{userinfo.nickname}}</text>
						<text @click="doCopy" v-if="userinfo.invitation_code">我的邀请码：{{userinfo.invitation_code}}</text>
					</view>
				</view>

				<view class="userleft" v-else @click="isLogin">
					<image class="userimg" :src="IMGLink+'/my/user_default.png'" mode="">
					</image>
					<view class="username">
						授权登录
					</view>
				</view>
				<image class="sets" :src="IMGLink+'/my/sets.png'" mode="" @click="goPage('/pagesA/my/userinfo/index')">
				</image>
			</view>
			<uni-grid v-if="userinfo" class="useraccount" :column="4" :showBorder="false" :square="false"
				:highlight="false" @change="changeGrid">
				<uni-grid-item :index="0">
					<text class="num">{{userinfo.user_account}}</text>
					<text>余额</text>
				</uni-grid-item>
				<uni-grid-item :index="1">
					<text class="num">{{userinfo.user_red}}</text>
					<text>红包</text>
				</uni-grid-item>
				<uni-grid-item :index="2">
					<text class="num">{{userinfo.user_virtual_coin | toFixedZero}}</text>
					<text>{{names.coin}}</text>
				</uni-grid-item>
				<uni-grid-item :index="3">
					<text class="num">{{userinfo.user_fans}}</text>
					<text>粉丝人数</text>
				</uni-grid-item>
			</uni-grid>
			<view class="vips" @click="goPage('/pagesA/my/vips/myvip')" v-if="userinfo && userinfo.user_level_id">
				<view>
					<image class="vip_icon" :src="IMGLink+'/my/vip_icon.png'" mode="widthFix"></image>
					<text v-if="userinfo.user_level_id == '0'">快来升级为会员吧！</text>
					<text v-else-if="userinfo.user_level_id == '1'">您已是会员，享受权限吧！</text>
				</view>

				<button class="vipbtn" type="default" size="mini">
					<text v-if="userinfo.user_level_id == '0'">成为会员</text>
					<text v-else-if="userinfo.user_level_id == '1'">进入会员</text>
				</button>
			</view>
		</view>

		<view class="userorder">
			<uni-grid :column="5" :showBorder="false" :square="false" :highlight="false" @change="goOrder">
				<uni-grid-item class="ordernums" v-for="(item,index) in orderList" :key="index" :index="index">
					<image class="order_icon" :src="IMGLink+item.icon" mode=""></image>
					<text>{{item.name}}</text>
					<uni-badge v-if="index == 0" class="badges" size="small" :text="badgesDetail.paid_num"
						absolute="rightBottom" type="error">
					</uni-badge>
					<uni-badge v-if="index == 1" class="badges" size="small" :text="badgesDetail.delivered_num"
						absolute="rightBottom" type="error">
					</uni-badge>
					<uni-badge v-if="index == 2" class="badges" size="small" :text="badgesDetail.received_num"
						absolute="rightBottom" type="error">
					</uni-badge>
				</uni-grid-item>
			</uni-grid>
			<image class="border_right_img" :src="IMGLink+'/my/border_right.png'" mode=""></image>
		</view>
		<image class="invite_img" v-if="!version.embedded" @click="invite" :src="IMGLink+inviteimg" mode="">
		</image>
		<view class="commonuse">
			<image class="common_bg" :src="IMGLink+'/my/success_top.png'" mode="widthFix"></image>
			<view class="common_title">
				常用功能
			</view>
			<view class="commonlist">
				<uni-grid :column="4" :showBorder="false" :square="false" :highlight="false" @change="changeFunc">
					<uni-grid-item v-for="(item,index) in funcList" :key="index" :index="index">
						<image class="func_icon" :src="IMGLink+item.icon" mode="heightFix"></image>
						<text>{{item.name}}</text>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		name_config,
		version
	} from "@/common/config.js"
	import {
		mapState,
	} from 'vuex';
	import {
		coins
	} from '@/api/my/my.js';
	import auth from "@/components/auth/auth";
	import {
		orderlist
	} from "@/api/my/orders.js";
	import copyFunc from "@/utils/userCommon.js";
	
	let funcList = [{
			icon: "/my/func_icon1.png",
			name: "多人拼购",
			url: "/pagesA/my/groupbuylist/grouplist"
		},
		{
			icon: "/my/func_icon2.png",
			name: "抽奖记录",
			url: "/pagesA/my/award/awardLog"
		},
		// {
		// 	icon: "/my/func_icon2.png",
		// 	name: "优拍币订单",
		//	url: "/pagesA/my/groupbuylist/grouplist"
		// },
		{
			icon: "/my/func_icon3.png",
			name: "单人拼购",
			url: "/pagesA/my/onebuy/onebuylist"
		},
		{
			icon: "/my/func_icon4.png",
			name: "优惠券",
			url: "/pagesA/my/coupons/ticketlist"
		},
		{
			icon: "/my/func_icon5.png",
			name: "规则协议",
			url: "/pagesA/my/rules/rulelist"
		},
		{
			icon: "/my/func_icon6.png",
			name: "意见反馈",
			url: "/pagesA/my/suggestion/suggestion",
			embedded: true
		},
		{
			id: 7,
			icon: "/my/func_icon7.png",
			name: "实名认证",
			url: "/pagesA/my/identification/index",
			embedded: true
		},
		{
			icon: "/my/func_icon8.png",
			name: "我的客服",
			url: "/pagesA/my/customerservice/customerservice",
			embedded: true
		},
	]
	if(version.embedded) {
		funcList = funcList.filter(item => {
			return !item.embedded
		})
	}
	export default {
		components: {
			auth,
		},
		data() {
			return {
				version: version,
				names: name_config,
				IMGLink: this.IMGLink,
				orderList: [{
						icon: "/my/order_icon1.png",
						name: "待付款"
					},
					{
						icon: "/my/order_icon2.png",
						name: "待发货"
					},
					{
						icon: "/my/order_icon3.png",
						name: "待收货"
					},
					{
						icon: "/my/order_icon4.png",
						name: "交易记录"
					},
					{
						icon: "/my/order_icon5.png",
						name: "全部订单"
					},
				],
				funcList: funcList,
				inviteimg: "/my/invite_img.png",
				badgesDetail: {},
			}
		},
		computed: {
			...mapState(['userinfo', 'hasRegister'])
		},
		onShow() {
			this.$store.dispatch("updateUserInfo");
			this.getBadge();

		},
		methods: {
			isLogin() {
				this.$refs.auth.checkLogin();
			},
			goPage(url) {
				if (!this.hasRegister) {
					this.isLogin();
					return;
				}
				uni.navigateTo({
					url: url,
				});
			},
			changeGrid(e) {
				let url = '';
				switch (e.detail.index) {
					case 0:
						url = "/pagesA/my/account/balance";
						break;
					case 1:
						url = "/pagesA/my/redpacket/redpacket";
						break;
					case 2:
						url = "/pagesA/my/coins/coinlist";
						break;
					case 3:
						url = "/pagesA/my/fans/fanslist";
						break;
				}
				this.goPage(url);
			},
			changeFunc(e) {
				let index = e.detail.index;
				let url = this.funcList[index].url;
				let id = this.funcList[index].id;
				if (+this.userinfo.is_autherized === 1 && id && +id === 7) {
					url = "/pagesA/my/identification/editIdentifition";
				}
				this.goPage(url);
			},
			invite() {
				this.goPage("/pagesA/my/invitefriends/invitefriends");
			},
			goOrder(e) {
				let url = `/pagesA/my/orders/orderlist?active=${e.detail.index}`;
				this.goPage(url);
			},
			doCopy() {
				copyFunc.is_copy(this.userinfo.invitation_code);
			},
			async getBadge() {
				const res = await orderlist('ordernum', {});
				if (res.code == 200) {
					this.badgesDetail = res.data;
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #F0F1F2;
	}
</style>
<style scoped lang="scss">
	@import './my.scss';

	.usercenter {
		padding-bottom: 20rpx;
	}

	.userdetail {
		padding-top: 88rpx;
		box-sizing: border-box;
		height: 465rpx;
		@include bck_img($img-link+'/my/user-bg.png');
		color: #FFFFFF;
		margin-bottom: 40rpx;
	}

	.uni-grid-item uni-text,
	.uni-grid-item text,
	.uni-grid-item uni-icons {
		text-align: center;
	}

	.userinfo .userimg {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.userinfo,
	.username,
	.userleft {
		display: flex;
		align-items: center;
	}

	.userinfo {
		padding: 40rpx 10rpx 32rpx 40rpx;
		justify-content: space-between;
	}

	.username {
		flex-direction: column;
		align-items: flex-start;
		font-size: 24rpx;

		.nick {
			font-size: 40rpx;
		}
	}

	.sets {
		width: 68rpx;
		height: 68rpx;
	}

	.useraccount {
		font-size: 26rpx;

		.num {
			font-size: 36rpx;
		}
	}

	.vips {
		box-sizing: border-box;
		width: 94%;
		height: 104rpx;
		background: linear-gradient(180deg, #172E7B 0%, #0B2563 100%);
		border-radius: 24rpx;
		margin: 32rpx 3%;
		padding: 22rpx 26rpx;
		font-size: 26rpx;
		@include flexLayout(center, space-between);

		.vipbtn {
			color: #FFFFFF;
			background: #D69D59;
			border-radius: 26rpx;
			margin: 0;
		}

		.vip_icon {
			width: 36rpx;
			margin-right: 12rpx;
			margin-bottom: -4rpx;
		}
	}

	.userorder {
		position: relative;
		box-sizing: border-box;
		@include basewidth;
		background: #FFFFFF;
		border-radius: 16rpx;
		color: #6A6A6B;
		font-size: 24rpx;
		padding: 40rpx 0;
		margin-bottom: 26rpx;
		overflow: hidden;

		.badges {
			position: absolute;
		}

		// 只在微信小程序内获取改数据
		//#ifdef MP-WEIXIN	
		.badges {
			right: 38rpx;
			top: -8rpx;
		}

		//#endif

		//#ifdef H5
		.badges {
			right: 42rpx;
			top: 12rpx;
		}

		//#endif

		.border_right_img {
			position: absolute;
			right: 20%;
			top: 10rpx;
			width: 24rpx !important;
			height: 94%;
		}

		.order_icon {
			width: 52rpx;
			height: 50rpx;
			margin-bottom: 18rpx;
		}
	}

	/deep/ .uni-grid-item__box {
		align-items: center;
		justify-content: flex-end;
	}

	.invite_img {
		@include basewidth;
		border-radius: 16rpx;
		height: 194rpx;
		margin-top: 0;
		margin-bottom: 0;
	}

	.commonuse {
		box-sizing: border-box;
		@include basewidth;
		border-radius: 16rpx;
		background: #FFFFFF;
		padding: 20rpx 16rpx 12rpx;
		font-size: 26rpx;
		color: #505050;
		margin: 16rpx 3% 0;
		overflow: hidden;

		.common_title {
			font-size: 32rpx;
			color: #0A0C0D;
			font-weight: 500;
			margin-bottom: 24rpx;
		}

		.uni-grid-item,
		uni-grid-item {
			margin-bottom: 20rpx;
			height: 122rpx;
		}

		.common_bg {
			width: 68rpx;
		}

		.commonlist,
		.common_title {
			position: relative;
			top: -40rpx;
		}

		.func_icon {
			height: 42rpx;
			margin-bottom: 18rpx;
		}
	}
</style>
